<template>
  <div class="table-pagination">
    <div class="pagination-slot">
      <slot name="paginationLeft"></slot>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20,50, 100]"
      :page-size="pageSzie"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-button style="margin-left:40px" icon="el-icon-refresh-right" size="mini" @click="refresh" circle></el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      pageSzie:10
    }
  },
  props:['total','currentPage'],
  methods:{
    handleSizeChange(val){              //修改每页的size
      this.pageSzie = val
      this.$emit('handleSizeChange',val)
    },
    handleCurrentChange(val){           //当前页改变
      this.$emit('handleCurrentChange',val)
    },
    refresh(){    //重置分页
    this.pageSzie = 10
      this.$emit('reset','')
    }
  }
}
</script>

<style lang="scss" scoped>
.table-pagination{
  border-top: 1px solid #ddd;
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  .pagination-slot{
    flex: 1;
  }
}
</style>
